<!--数据简报-->
<template>
    <div id="data-box">
      <div class="data-box-header">
        <p>图标导航</p>
        <hr color="red">
        <span>热门彩种</span>
        <table>
          <tr>
            <td>
              <img src="@/assets/imgs/dlt.png" alt="" />
              <p>超级大乐透</p>
            </td>
            <td>
              <img src="@/assets/imgs/qxc.png" alt="" />
              <p>七星彩</p>
            </td>
            <td>
              <img src="@/assets/imgs/pls.png" alt="" />
              <p>排列3</p>
            </td>
            <td>
              <img src="@/assets/imgs/plw.png" alt="" />
              <p>排列5</p>
            </td>
            <td>
              <img src="@/assets/imgs/sfc.png" alt="" />
              <p>胜负彩</p>
            </td>
            <td>
              <img src="@/assets/imgs/ssq.jpg" alt="" />
              <p>双色球</p>
            </td>
            <td>
              <img src="@/assets/imgs/qlc.jpg" alt="" />
              <p>七彩乐</p>
            </td>
            <td>
              <img src="@/assets/imgs/3d.jpg" alt="" />
              <p>福彩3D</p>
            </td>
            <td>
              <img src="@/assets/imgs/kl8.jpg" alt="" />
              <p>快乐8</p>
            </td>
          </tr>
        </table>
        <el-divider content-position="right">远离赌博</el-divider>
      </div>
      <div class="data-box-down">
        <p>
          <span>数据简报</span>
          <el-divider content-position="left">少量的邪恶足以抵消全部高贵的品质, 害得人声名狼藉</el-divider>
        </p>
        <table>
          <tr>
            <td>
              <button
                  :style="buttonShow1"
                  @click="isShow(1)"
              >超级大乐透</button>
            </td>
            <td>
              <button
                  :style="buttonShow2"
                  @click="isShow(2)"
              >双色球</button>
            </td>
            <td>
              <button
                  :style="buttonShow3"
                  @click="isShow(3)"
              >福彩3D</button>
            </td>
            <td>
              <button
                  :style="buttonShow4"
                  @click="isShow(4)"
              >排列3</button>
            </td>
          </tr>
        </table>
        <p style="font-size: 12px;">号码开奖走势</p>
        <div class="data-box-down-1">
          <div>
            <ul>
              <li
                  @click="isSHows1(30)"
                  :style="liColor1"
              >30期</li>
              <li
                  @click="isSHows1(50)"
                  :style="liColor2"
              >50期</li>
              <li
                  @click="isSHows1(100)"
                  :style="liColor3"
              >100期</li>
              <li style="margin-left: 75%;"
                  v-if="!isFlag"
              >
                <ul>
                  <li
                      :style="liColor4"
                      @click="ColorSHows1(type1)"
                  >{{type1}}</li>
                  <li
                      :style="liColor5"
                      @click="ColorSHows1(type2)"
                  >{{type2}}</li>
                </ul>
              </li>
              <li style="margin-left: 75%;"
                  v-if="isFlag"
              >
                <ul>
                  <li
                      :style="liColor4"
                      @click="ColorSHows1(type3)"
                  >{{type3}}</li>
                  <li
                      :style="liColor5"
                      @click="ColorSHows1(type4)"
                  >{{type4}}</li>
                  <li
                      :style="liColor6"
                      @click="ColorSHows1(type5)"
                  >{{type5}}</li>
                </ul>
              </li>

            </ul>
          </div>
          <div id="data-box-down-main">
            
          </div>
        </div>
      </div>
    </div>
</template>

<script>

import * as echarts from 'echarts';
export default {
  name: 'DataPresentation',
  data(){
    return {
      buttonShow1: "font-weight: bold;color: white;background-color: blue;",
      buttonShow2: "",
      buttonShow3: "",
      buttonShow4: "",
      liColor1: "color: red", // 30期
      liColor2: "",
      liColor3: "", // 100期
      liColor4: "color: red", // 红球，或百位
      liColor5: "",
      liColor6: "",
      isFlag: false,
      buttonText: "超级大乐透",
      buttonType1: "红球",
      buttonType2: "百位",
      type1: "红球",
      type2: "蓝球",
      type3: "百位",
      type4: "十位",
      type5: "个位",
    }
  },
  mounted() {
    this.getData1("getDlt30Redfb");
  },
  methods: {
    open4(msg) {
      this.$notify.error({
        title: msg,
        message: '错误的提示消息'
      });
    },
    isShow(id) {
      if(id === 1) {
          this.buttonShow1 = "font-weight: bold;color: white;background-color: blue;";
          this.buttonShow2 = "";
          this.buttonShow3 = "";
          this.buttonShow4 = "";
          this.isFlag = false;
          this.buttonText = '超级大乐透';
          this.getData1("getDlt30Redfb"); // // 默认30期
      }else if(id === 2) {
        this.buttonShow1 = "";
        this.buttonShow2 = "font-weight: bold;color: white;background-color: blue;";
        this.buttonShow3 = "";
        this.buttonShow4 = "";
        this.isFlag = false;
        this.buttonText = '双色球';
        this.getData1("getSsq30Redfb"); // 默认30期
      }else if(id === 3) {
        this.buttonShow1 = "";
        this.buttonShow2 = "";
        this.buttonShow3 = "font-weight: bold;color: white;background-color: blue;";
        this.buttonShow4 = "";
        this.isFlag = true;
        this.buttonText = '福彩3D';
        this.getData2("getSd30Yilou1");
      }else if(id === 4) {
        this.buttonShow1 = "";
        this.buttonShow2 = "";
        this.buttonShow3 = "";
        this.buttonShow4 = "font-weight: bold;color: white;background-color: blue;";
        this.isFlag = true;
        this.buttonText = '排列3';
        this.getData2("getPls30Yilou3");
      }
    },
    initLine(x, y) {
      let chartDom = document.getElementById('data-box-down-main');
      let myChart = echarts.init(chartDom);
      let option;

      option = {
        tooltip: {
          trigger: 'axis',
          formatter: "球号: {b} <br/> 次数: {c}",
          axisPointer: {
            type: 'shadow'
          }
        },
        xAxis: {
          name: '球号',
          type: 'category',
          data: x
        },
        yAxis: {
          type: 'category',
          name: '次数',
        },
        series: [
          {
            data: y,
            type: 'line',
            smooth: true,
            itemStyle: {
              normal: {
                color: 'red', //改变折线点的颜色
                lineStyle: {
                  color: 'red' //改变折线颜色
                }
              }
            },
          }
        ]
      };

      option && myChart.setOption(option);

    },
    getData1(param) {
      let list_x = [];
      let list_y = [];
      this.$axios.get('/api/datas/' + param, {

      }).then(res =>{
        if(res.data.code === 20041) {

          let length = Object.keys(res.data.data.area).length;

          for (let i = 1; i < (length + 1); i++) {
            list_x.push(i);
            list_y.push(res.data.data.area[i].num);
          }

          this.initLine(list_x, list_y);
        }else {
          this.open2('账号不存在，请注册后登录');//查无此号
          this.name = '';
          this.password = '';
        }
      }).catch(error =>{
        this.open4(error)
      })
    },
    getData2(param) {
      // let list_x = [];
      // let list_y = [];
      this.$axios.get('/api/datas/' + param, {

      }).then(res =>{
        if(res.data.code === 20041) {
          let list_x = [];
          let list_y = [];
          let temp = res.data.data.url.split("=")
          list_x = temp[1].split("&")[0].split(",");
          list_y = temp[2].split("&")[0].split(",");
          this.initLine(list_x, list_y);
        }else {
          this.open2('账号不存在，请注册后登录');//查无此号
          this.name = '';
          this.password = '';
        }
      }).catch(error =>{
        this.open4(error)
      })
    },
    ColorSHows1(param){
      if(param === "红球" || param === '百位') {
        this.liColor4 = "color: red";
        this.liColor5 = "";
        this.liColor6 = "";
        this.buttonType1 = "红球";
        this.buttonType2 = "百位";
      }else if(param === "蓝球" || param === '十位') {
        this.liColor4 = "";
        this.liColor5 = "color: red";
        this.liColor6 = "";
        this.buttonType1 = "蓝球";
        this.buttonType2 = "十位";
      }else if(param === "个位") {
        this.liColor4 = "";
        this.liColor5 = "";
        this.liColor6 = "color: red";
        this.buttonType2 = "个位";
      }
    },
    isSHows1(id) {
      if(this.buttonText === "超级大乐透") {
        if (id === 30) {
          this.liColor1 = 'color: red';
          this.liColor2 = '';
          this.liColor3 = '';
          if(this.buttonType1 === '红球') {
            this.getData1("getDlt30Redfb");
          }else {
            this.getData1("getDlt30Bluefb");
          }
        }else if (id === 50) {
          console.log(this.buttonText + "----" + id);
          this.liColor1 = '';
          this.liColor2 = 'color: red';
          this.liColor3 = '';
          if(this.buttonType1 === '红球') {
            this.getData1("getDlt50Redfb");
          }else {
            this.getData1("getDlt50Bluefb");
          }
        }else if (id === 100) {
          console.log(this.buttonText + "----" + id);
          this.liColor1 = '';
          this.liColor2 = '';
          this.liColor3 = 'color: red';
          if(this.buttonType1 === '红球') {
            this.getData1("getDlt100Redfb");
          }else {
            this.getData1("getDlt100Bluefb");
          }
        }
      }else if(this.buttonText === "双色球") {
        if (id === 30) {
          this.liColor1 = 'color: red';
          this.liColor2 = '';
          this.liColor3 = '';
          if(this.buttonType1 === '红球') {
            this.getData1("getSsq30Redfb");
          }else {
            this.getData1("getSsq30Bluefb");
          }
        }else if (id === 50) {
          console.log(this.buttonText + "----" + id);
          this.liColor1 = '';
          this.liColor2 = 'color: red';
          this.liColor3 = '';
          if(this.buttonType1 === '红球') {
            this.getData1("getSsq50Redfb");
          }else {
            this.getData1("getSsq50Bluefb");
          }
        }else if (id === 100) {
          console.log(this.buttonText + "----" + id);
          this.liColor1 = '';
          this.liColor2 = '';
          this.liColor3 = 'color: red';
          if(this.buttonType1 === '红球') {
            this.getData1("getSsq100Redfb");
          }else {
            this.getData1("getSsq100Bluefb");
          }
        }
      }else if(this.buttonText === "福彩3D") {
        if (id === 30) {
          this.liColor1 = 'color: red';
          this.liColor2 = '';
          this.liColor3 = '';
          if(this.buttonType2 === '百位') {
            this.getData2("getSd30Yilou1");
          }else if(this.buttonType2 === '十位'){
            this.getData2("getSd30Yilou2");
          }else {
            this.getData2("getSd30Yilou3");
          }
        }else if (id === 50) {
          console.log(this.buttonText + "----" + id);
          this.liColor1 = '';
          this.liColor2 = 'color: red';
          this.liColor3 = '';
          if(this.buttonType2 === '百位') {
            this.getData2("getSd50Yilou1");
          }else if(this.buttonType2 === '十位'){
            this.getData2("getSd50Yilou2");
          }else {
            this.getData2("getSd50Yilou3");
          }
        }else if (id === 100) {
          console.log(this.buttonText + "----" + id);
          this.liColor1 = '';
          this.liColor2 = '';
          this.liColor3 = 'color: red';
          if(this.buttonType2 === '百位') {
            this.getData2("getSd100Yilou1");
          }else if(this.buttonType2 === '十位'){
            this.getData2("getSd100Yilou2");
          }else {
            this.getData2("getSd100Yilou3");
          }
        }
      }else {
        if (id === 30) {
          this.liColor1 = 'color: red';
          this.liColor2 = '';
          this.liColor3 = '';
          if(this.buttonType2 === '百位') {
            this.getData2("getPls30Yilou1");
          }else if(this.buttonType2 === '十位'){
            this.getData2("getPls30Yilou2");
          }else {
            this.getData2("getPls30Yilou3");
          }
        }else if (id === 50) {
          console.log(this.buttonText + "----" + id);
          this.liColor1 = '';
          this.liColor2 = 'color: red';
          this.liColor3 = '';
          if(this.buttonType2 === '百位') {
            this.getData2("getPls50Yilou1");
          }else if(this.buttonType2 === '十位'){
            this.getData2("getPls50Yilou2");
          }else {
            this.getData2("getPls50Yilou3");
          }
        }else if (id === 100) {
          console.log(this.buttonText + "----" + id);
          this.liColor1 = '';
          this.liColor2 = '';
          this.liColor3 = 'color: red';
          if(this.buttonType2 === '百位') {
            this.getData2("getPls100Yilou1");
          }else if(this.buttonType2 === '十位'){
            this.getData2("getPls100Yilou2");
          }else {
            this.getData2("getPls100Yilou3");
          }
        }
      }
    }
  }

}

</script>

<style scoped>
@import "css/DataPresentation.css";
</style>